<template>
    <div id="AllEvaluate">
        <!-- 头部 -->
        <div class="home_top">
          <van-nav-bar title="全部评价" left-text="返回" left-arrow
             @click-left="onClickLeft"
             @click-right="onClickRight"
          >
            <template #right>
              <van-icon name="ellipsis" size="18" />
            </template>
          </van-nav-bar>
      </div>

      <div class="count">
      <!-- 评价 -->
      <div class="evaluate_cont">
        <van-skeleton
                title
                avatar
                :row="4"
                :loading="loading"
        >
        <div class="cont_every">
        <!-- 头像 -->
        <div>
            <img src="../assets/images/全部评价/fans.png">
                <span>董大伟</span>
            </div>
            <!-- 评价内容 -->
            <p>产品不错，衣服尺寸很合适，下次还会再来！</p>
            <!-- 评价图片 -->
            <div class="evaluate_photo">
                <div><img src="../assets/images/全部评价/pic_01.png"></div>
                <div><img src="../assets/images/全部评价/pic_02.png"></div>
                <div><img src="../assets/images/全部评价/pic_03.png"></div>
            </div>
            <!-- 评价星级 -->
            <div class="star_rating">
                <div><span class="star_char">产品质量</span>
                    <van-rate
                        v-model="value"
                        :size="12"
                        color="#234497"
                        void-icon="star"
                        void-color="#eee"
                    />
                </div>
                <div><span class="star_char">服务态度</span>
                    <van-rate
                        v-model="value"
                        :size="12"
                        color="#234497"
                        void-icon="star"
                        void-color="#eee"
                    />
                </div>
                <div><span class="star_char">尺寸合适</span>
                    <van-rate
                        v-model="value"
                        :size="12"
                        color="#234497"
                        void-icon="star"
                        void-color="#eee"
                    />
                </div>
            </div>
        </div>
        </van-skeleton>


      </div>



       <!-- 评价 -->
      <div class="evaluate_cont">
        <van-skeleton
                title
                avatar
                :row="4"
                :loading="loading"
        >
        <div class="cont_every">
        <!-- 头像 -->
        <div>
            <img src="../assets/images/全部评价/fans.png">
                <span>董大伟</span>
            </div>
            <!-- 评价内容 -->
            <p>产品不错，衣服尺寸很合适，下次还会再来！</p>
           
            <!-- 评价星级 -->
            <div class="star_rating">
                <div><span class="star_char">产品质量</span>
                    <van-rate
                        v-model="value"
                        :size="12"
                        color="#234497"
                        void-icon="star"
                        void-color="#eee"
                    />
                </div>
                <div><span class="star_char">服务态度</span>
                    <van-rate
                        v-model="value"
                        :size="12"
                        color="#234497"
                        void-icon="star"
                        void-color="#eee"
                    />
                </div>
                <div><span class="star_char">尺寸合适</span>
                    <van-rate
                        v-model="value"
                        :size="12"
                        color="#234497"
                        void-icon="star"
                        void-color="#eee"
                    />
                </div>
            </div>
        </div>
        </van-skeleton>


      </div>



</div>


    </div>
</template>

<script>
export default {
    name:'AllEvaluate',
    data(){
        return{
            loading: true,
            value: 5,
        }
 
    },
    mounted() {
        this.loading = false;
    },
     methods: {
    onClickLeft() {
     
      this.$router.go(-1)
    },
    onClickRight() {
     
    },
  },
}
</script> 

<style lang="less">
.count{
    padding-top: 90px;
}
// 评价内容
.evaluate_cont{
    width: 100%;
}
.cont_every{
    width: 100%;
    padding-top: 26px;
    padding-left: 26px;
    box-sizing: border-box;
    border-bottom: 1px solid #e0e0e0;
    img{
        width: 8%;
    }
    span{
        font-size: 24px;
        text-indent: 48px;
    }
    p{
        font-size: 24px;
    }
    .evaluate_photo{
        width: 50%;
        display: flex;
        justify-content:space-between;
        div{
            width: 30%;
            border: 1px solid #e0e0e0;
            img{
                width: 100%;
            }
        }
    }
    .star_rating{
        width:90%;
        div{
            width: 33%;
        }
        .star_char{
            font-size: 18px;
            color: #999999;
        }
    }
}
</style>
